<template>
  <div>
    <div class="bigBox">
      <swiper class="picRoller" :carousePicData="carousePicData"></swiper>
      <back class="back"></back>
      <cart class="back"></cart>
      <div class="introBox">
        <p class="titleBox">
          <span class="title">承唐宋之风原创三合一熏香炉</span>
        </p>
        <p class="subTitleBox">
          <span class="subTitle">大师之作 传承经典</span>
        </p>
        <p class="priceBox">
          <span class="newPrice">￥2300</span>
          <span class="oldPrice">￥2500</span>
          <span class="volume">已售110件</span>
        </p>
      </div>
      <div class="tipsBox">
        <p class="deliverBox">
          <span>发货</span>
          <span>·广东佛山·包邮</span>
        </p>
        <p class="confirm">
          <span>保障</span>
          <span>·正品保障·7天无理由退换货</span>
        </p>
      </div>
      <div class="commentBox">
        <p class="commentTitleBox">
          <span>评价({{commentData.length}})</span>
          <span @click="open">查看全部 ></span>
        </p>

        <div class="commentDetailBox" :class="{commentHight:flag}">
          <div
            class="commentDetail"
            v-for="(item, idx) in commentData"
            :key="idx"
          >
            <p class="headImgText">
              <span class="headImg">
                <img :src="item.headImg" alt="" />
              </span>
              <span class="userName" v-text="item.username"></span>
            </p>
            <p class="content" v-text="item.commentContent"></p>
            <p class="pic">
              <img :src="item.commentImg" alt="" />
            </p>
          </div>
        </div>


      </div>
      <div class="itemDetail">
        <p class="title">商品详情</p>
      </div>
      <div class="purchaseBox1"></div>
      <div class="purchaseBox">
        <div class="customerAndCollect">
          <div class="customerService">
            <p class="pic">
              <img
                src="../../assets/img/goodsDetail/customer servicePic.png"
                alt=""
              />
            </p>
            <p class="text">客服</p>
          </div>
          <div class="collect">
            <p class="pic">
              <img
                src="../../assets/img/goodsDetail/addCollection.png"
                alt=""
              />
            </p>
            <p class="text">收藏</p>
          </div>
        </div>
        <div class="submit">
          <div class="addCart" @click="show">加入购物车</div>
          <div class="buy" @click="show">立即购买</div>
        </div>
      </div>
    </div>
    <!------------- 轮播图 ---------------->

    <!-------------- 购物选项 ---------------->
    <div class="backgroundWall" v-show="show1"></div>
    <div class="goodsOption" v-show="show2">
      <span class="close" @click="close">X</span>
      <div class="itemDetailBox">
        <div class="pic">
          <img
            src="../../assets/img/goodsDetail/product details_icon_back@2x.png"
            alt=""
          />
        </div>
        <div class="content">
          <p class="title">承唐宋之风原创三合一熏香炉</p>
          <p class="price">￥2300</p>
        </div>
      </div>
      <div class="optBox">
        <p class="title">颜色</p>
        <div class="optSelect">
          <div
            class="opt"
            :class="{ current: idx == current }"
            v-for="(item, idx) in optData1"
            :key="idx"
            @click="jump(idx)"
          >
            {{ item.optname }}
          </div>
        </div>
      </div>
      <div class="optBox">
        <p class="title">分类</p>
        <div class="optSelect">
          <div
            class="opt"
            :class="{ current: idx == current1 }"
            v-for="(item, idx) in optData2"
            :key="idx"
            @click="change(idx)"
          >
            {{ item.optname }}
          </div>
        </div>
      </div>
      <div class="optBox">
        <p class="title">购买数量</p>
        <div class="addOrMinus">
          <input type="button" value="-" class="minus" @click="minus" />
          <span class="num">{{ this.ammount }}</span>
          <input type="button" value="+" class="add" @click="add" />
        </div>
      </div>
      <div class="box"></div>
      <div class="submit" @click="turnTo">确定</div>
    </div>
  </div>
</template>

<script>
import swiper from "@/components/swiper";
import back from "@/components/back";
import cart from "@/components/cart";

export default {
  name: "goodsDetail",
  data() {
    return {
      show1: false,
      show2: false,
      ammount: 1,
      current: 0,
      current1: 0,
      carousePicData: [],
      optData1: [],
      optData2: [],
      commentData: [],
      flag:false,
      page:0,
      number:10,
    };
  },
  // created() {
  //   // 获取getcarousePicList这个接口
  //   // const axios = require("axios");
  // },
  created() {
    this.ev_getSwiperPicData();
    this.ev_getOptData1();
    this.ev_getOptData2();
    this.ev_getCommentData();
  },
  components: {
    swiper,
    back,
    cart,
  },
  methods: {
    ev_getSwiperPicData() {
      this.axios
        .get("/getcarousePicList")
        // 成功了就执行then
        .then((response) => {
          console.log('response',response);
          this.carousePicData = response.data;
        })
        // 失败了就执行catch
        .catch((error) => {
          console.log(error);
        });
    },
    ev_getOptData1() {
      this.axios
        .get("/getOptData1")
        // 成功了就执行then
        .then((response) => {
          this.optData1 = response.data;
          console.log(this.optData1);
        })
        // 失败了就执行catch
        .catch((error) => {
          console.log(error);
        });
    },
    ev_getOptData2() {
      this.axios
        .get("/getOptData2")
        // 成功了就执行then
        .then((response) => {
          console.log(response);
          this.optData2 = response.data;
        })
        // 失败了就执行catch
        .catch((error) => {
          console.log(error);
        });
    },
    ev_getCommentData() {
      this.axios
        .get("/getCommentData")
        .then((res) => {
          this.commentData = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    show() {
      this.show1 = !this.show1;
      this.show2 = !this.show2;
    },
    jump(idx) {
      this.current = idx;
    },
    change(idx) {
      this.current1 = idx;
    },
    add() {
      this.ammount = this.ammount + 1;
    },
    minus() {
      if (this.ammount >= 2) {
        this.ammount = this.ammount - 1;
      }
    },
    close() {
      this.show1 = !this.show1;
      this.show2 = !this.show2;
    },
    turnTo() {
      this.$router.push({ path: "/confirmOrder" });
    },
    open() {
      this.flag = !this.flag;
    }
  },
};
</script>

<style src="../../assets/css/goodsDetail/index.css" scoped></style>